<!DOCTYPE HTML>
<style>
.invalid {
    letter-spacing: 20px;
    letter-spacing: calc(1 + 1px);
    letter-spacing: calc(1 + 100%);
    letter-spacing: calc(100%);
    letter-spacing: calc(10px) bla;
    letter-spacing: calc(bla) 10px;
}
.valid {
    letter-spacing: calc(10px);
}
</style>
<div class="invalid"></div>
<div class="valid"></div>
<script src="../../resources/js-test.js"></script>
<script>
if (window.testRunner)
    testRunner.dumpAsText();

function getComputedValue(selector, property) {
    return getComputedStyle(document.querySelector(selector))[property];
}

shouldBe('getComputedValue(".invalid", "letterSpacing")', '"20px"');
shouldBe('getComputedValue(".valid", "letterSpacing")', '"10px"');
</script>
